import React, { Component } from 'react';
import  './header.scss'
import { connect } from 'react-redux';
import { submit } from '../../store/actionCreator'

class Header extends Component {
  render() {
    const {ipt,iptVal}=this.props
    return (
      <div className='todo-header'>
        <div className='todo-header-con'>
    <label htmlFor="title">{ipt}</label>
		 <input type="text" id="title" name="title" placeholder={iptVal} required="required" autoComplete="off" onKeyDown={(e)=>{this.props.submit(e)}}></input>
        </div>
      </div>
    );
  }
}
const mapStateToProps=(state)=>{
  return {
    ipt:state.ipt,
    iptVal:state.iptVal,
    ToDoList:state.ToDoList
  }
}
const mapDispatchToProps=(dispatch)=>{
  return{
    submit:(e)=>{
      if(e.keyCode===13&&e.target.value){
     dispatch(submit(e.target.value))
     e.target.value=""
      }
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Header)

